<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading>系统消息</e-heading>
      <div class="haveMsg" v-if="message_list.list&&message_list.list.length">
        <ul class="message-list">
          <li v-for="item in message_list.list" :key="item.id" class="divider">
            <e-cellbox class="message-title" middle>
              <e-cell-item>
                <h3>{{item.msgTitle}}</h3>
              </e-cell-item>
              <e-cell-item class="tr small weak">
                {{item.createTime | FormatDate}}
              </e-cell-item>
            </e-cellbox>
            <div class="message-body weak small">{{item.msgContent}}</div>
          </li>
        </ul>
        <!--分页-->
        <el-pagination v-bind="getPaginationProps(message_list)" @current-change="handleCurrentChange" @size-change="handleSizeChange">
        </el-pagination>
      </div>
      <e-placeholder v-else text="当前没有收到消息哦"></e-placeholder>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
import api from 'api/message'
import { VuecookieGet } from 'utils/cookie'
export default({
  mixins: [pagingList],
  data () {
    return {
      query: this.getQuery()
    }
  },
  computed: {
    ...mapGetters({
      message_unread: 'message_unread',
      message_list: 'message_list',
      message_organize_unread: 'message_organize_unread'
    })
  },
  watch: {
    message_list (newVal, oldVal) {
      let array = newVal.list.map(item => {
        return item.id
      })
      if (newVal.list.length > 0) {
        api.markMsg({msgIds: array}, {context: this, successMsg: 'none'}).then(res => {
          if (localStorage.getItem('auth_orgId')) {
            this.$store.dispatch('message_organize_unread')
          } else {
            this.$store.dispatch('message_unread', {authOrgId: VuecookieGet('htxk_userId')})
          }
        })
      }
    }
  },
  methods: {
    fetch (query) { // 分页，和搜索表单发生提交时触发事件
      this.$store.dispatch('message_list', query)
    }
  }
})
</script>

<style scoped lang="scss">
  .message-list {
    margin-top: 40px;
    li {
      margin-top: 30px
    }
    .message-body {
      margin:20px 0;
      line-height: 18px;
    }
  }
</style>
